import Taro, { Component } from '@tarojs/taro'
import { View, Text,Image, Input } from '@tarojs/components'
import { AtRadio } from 'taro-ui'
import './index.less'
import otherRightArrow from '../../img/otherRightArrow.png'
import wechat from '../../img/wechat.png'
import account from '../../img/account.png'

export default class confirmOrder extends Component {

  config = {
    navigationBarTitleText: '确认订单',
  }

  constructor () {
    super(...arguments)
    this.state = {
      value: ''
    }
  }
  handleChange (value) {
    this.setState({
      value
    })
  }
  handleJump(){
    Taro.navigateTo({
      url:'../successOrder/index'
    })
  }

  // componentWillMount () { }

  // componentDidMount () { }

  // componentWillUnmount () { }

  // componentDidShow () { }

  // componentDidHide () { }

  render () {
    const data = {
      information:{
        totalNmuber:1,
        img:'http://iph.href.lu/300x200?text=占位',
        name:'日系秋季男士长袖T恤',
        number:1,
        price:66
      },
      priceAndPreferential:[
        {
          id:1,
          text:'商品总价',
          price:89
        },{
          id:2,
          text:'优惠券',
          price:5
        }
      ],
      bottomPay:{
        totalPrice:56,
        preferential:4
      }
    }
    return (
      <View className='index'>
        {/**订单详情 */}
        <View className='order-big-box'>
          <Text>共{data.information.totalNmuber}件</Text>
          <View className='order-details-box'>
            <Image src={data.information.img} className='information-img' />
            <View className='order-details-right-box'>
              <View className='order-details-right-first-box'>
                <Text className='information-name'>{data.information.name}</Text>
                <Text className='information-number'>*{data.information.number}</Text>
              </View>
              <Text className='information-price'>￥{data.information.price}</Text>
            </View>
          </View>
        </View>
        {/**价格优惠 */}
        <View className='priceAndPreferential'>
          {data.priceAndPreferential.map(item=>(
            <View key={item.id} className='priceAndPreferential-line'>
              <Text className='priceAndPreferential-text'>{item.text}</Text>
              {item.id===2?
                <View className='preferential-line'>
                  <Text className='priceAndPreferential-price'>-￥{item.price}.00</Text>
                  <Image src={otherRightArrow} className='otherRightArrow' />
                </View>
                :
                <Text className='priceAndPreferential-price'>￥{item.price}.00</Text>
              }
            </View>
          ))}
        </View>
        {/** 支付*/}
        <View className='payBox'>
          <View className='icon-box'>
            <Image src={wechat}  className='icon' />
            <Image src={account} className='icon' />
          </View>
          <AtRadio
            options={[
              { label: '微信支付', value: 'option1',  },
              { label: '账户余额', value: 'option2' },
            ]}
            value={this.state.value}
            onClick={this.handleChange.bind(this)}
          />
        </View>
        {/**底部确认支付 */}
        <View className='bottom-pay-box'>
          <View className='left-price-box'>
            <Text className='bottomPay-totalPrice'>￥{data.bottomPay.totalPrice}.00</Text>
            <Text className='bottomPay-preferential'>已优惠￥{data.bottomPay.preferential}.00</Text>
          </View>
          <View className='right-pay' onClick={this.handleJump}>
            <Text className='right-pay-text'>确认支付</Text>
          </View>
        </View>
      </View>
    )
  }
}

